<template>
  <div ref="myChart" style="height: 400px;" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    var myChart = echarts.init(this.$refs.myChart)
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['6月房价', '7月房价', '8月房价']
      },
      dataZoom: [
        {
          start: 0,
          end: 35
        }
      ],
      xAxis: {
        type: 'category',
        data: ['深圳市', '广州市', '东莞市', '珠海市', '佛山市', '惠州市', '汕头市', '中山市', '潮州市', '湛江市', '江门市', '汕尾市', '茂名市', '肇庆市', '揭阳市', '河源市', '清远市', '梅州市', '韶关市', '阳江市', '云浮市']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '6月房价',
          data: [69367, 45798, 28531, 27199, 16330, 12350, 12004, 11993, 10717, 10573, 9622, 8500, 7656, 7397, 7064, 6982, 6973, 6969, 6170, 5825, 5006],
          type: 'line',
          smooth: true,
          // symbol: 'none',
          lineStyle: {
            color: 'red'
          }
        },
        {
          name: '7月房价',
          data: [69945, 45117, 26870, 26930, 15988, 11952, 12458, 12452, 11216, 11014, 9611, 8286, 7289, 7430, 6774, 7006, 6584, 7011, 6306, 5924, 5324],
          type: 'line',
          smooth: true,
          // symbol: 'none',
          lineStyle: {
            color: 'blue'
          }
        },
        {
          name: '8月房价',
          data: [69865, 45032, 26991, 28564, 15711, 12006, 11487, 12436, 10858, 11198, 9452, 8457, 7384, 7654, 7511, 6884, 6658, 7001, 6345, 6008, 5478],
          type: 'line',
          smooth: true,
          // symbol: 'none',
          lineStyle: {
            color: 'blue'
          }
        }
      ]
    }
    option && myChart.setOption(option)
  }
}
</script>

<style>

</style>
